<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
<script src="/CHENG-ZAO-ZAO/js/vue.js"></script>
</head>
<body>
     <div id="app">
       <p>{{counter}}</p >

        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>

        <p>---------------------</p>
        <button @click="increase()">+</button>
        <button @click="decrease()">-</button>



     </div>
<br>
<!-- 匿名函数this指向声明函数
    箭头函数this指向使用函数
 -->
   <script>
       let app = new Vue({
        el:"#app",
        data:{
             msg:'hello world',
             counter:0
        },
        methods:{
            increase(){
                this.counter++
            },
            decrease(){
                this.counter--
            }

        }

       })
    </script>
</body>
</html>

